<!Doctype html>
<html>
    <head>
        <title>Mouse Trace Alpha</title>
        <link rel="stylesheet" href="stylesheets/material.min.css">
        <link rel="stylesheet" href="stylesheets/style.css">
    </head>
    <body>
        <div id="orig" style="width:0px; height:0px"/>
        <div class="beside">
            <div class="two">
                <div class="demo-card-event mdl-card mdl-shadow--2dp" id="radar">
                    <div class="flex flex-column flex-align-stretch item mdl-card__title mdl-card--expand">
                        <div class="flex flex-row flex-align-start flex-justify-start flex-fill" id="verification_checkbox">
                            <div>
                                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox" id="checkbox_div">
                                <input type="checkbox" id="checkbox" class="mdl-checkbox__input">
                                </label>
                            </div>
                            <span class="flex-fill mdl-checkbox__label">我不是机器人</span>
                        </div>
                        <div class="flex flex-column flex-align-end" id="verification_button">
                            <div class="flex flex-row flex-align-center">
                                <div class="mdl-spinner mdl-js-spinner is-upgraded" style="width: 20px; height: 20px" id="loading_spinner"></div>
                                <div style="width: 10px"></div>
                                <button class="second-button mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" disabled="true" onclick="sendTraceArray()" id="the_button">
                                    验证
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="blank"></div>
                <div class="tooltip-card mdl-card mdl-shadow--2dp" id="tooltip-box">
                    <div class="mdl-card__title mdl-card--expand">
                        <span id="tooltip"></span>
                    </div>
                </div>
                <div class="blank"></div>
                <div class="tooltip-card mdl-card mdl-shadow--2dp" id="callback-box">
                    <div class="mdl-card__title mdl-card--expand">
                        <span id="callback-massage"></span>
                    </div>
                </div>
            </div>

            <div class="set-card mdl-card mdl-shadow--2dp" id="set-box">
                <div class="set mdl-card__title">
                    <span>哟！欢迎来帮我们增加可信的鼠标轨迹数据！</br>先勾选“我不是机器人”再点击验证按钮，乃的鼠标轨迹就被我们记录下来啦！如果愿意的话，你还可以重新勾选，再多录几次。</span>
                </div>
                <div class="flex flex-justify-center">
                    <form action="#">
                        <div class="mdl-card__title mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:230px" id="input_set">
                            <input class="mdl-textfield__input" type="text" id="set">
                            <label class="mdl-textfield__label" for="sample3" id="set_label">请把里面的信息复制给我们噢</label>
                        </div>
                    </form>
                </div>
                <div class="flex flex-row flex-justify-center">
                    <a href="/visualize">视图化</a>&nbsp
                    <a href="/visualize/all">我们的所有数据</a>
                </div>
            </div>
        </div>
        <script src="javascripts/jquery-2.1.4.js"></script>
        <script src="javascripts/isMobile.js"></script>
        <script src="javascripts/material.min.js"></script>
        <script src="javascripts/main.js"></script>
    </body>
</html>